<template>
	<div class="dashboard-container flex flex-column">
		<div class="dashboard-header flex align-center">
			<img src="@/static/桂林人民LOGO.png" class="logo">
			<div class="title-box flex-auto" @click="jump" style="cursor: pointer">
				<div class="title">DRG与财务分析维度(经营核心)</div>
				<div class="hospital-name">桂林市人民医院</div>
			</div>
			<div class="right-box flex align-center">
				<div class="time-box">
					<div class="current-time-label">当前时间</div>
					<div class="current-time-value">{{currentTime}}</div>
				</div>
				<div @click="drawer = true" style="cursor: pointer">
					<img src="@/static/角色图标.png" class="avatar">
					<div class="user-name">人云医疗智能体</div>
				</div>
			</div>
		</div>
		<div class="dashboard-main flex justify-content-space-between flex-auto"
			style="gap: 20px; height: calc(100vh - 120px);">
			<!-- 左边列 -->
			<div class="left-wrapper flex flex-column flex-auto">
				<div class="flex flex-auto" style="gap: 20px;margin-bottom: 10px; ">
					<div
						style="width: 450px;padding: 20px;border: 2px solid #0F3338;border-radius: 15px;background-color: #1A1C3F;"
						class="flex flex-column">
						<div class="flex justify-content-space-between align-center">
							<div style="font-size: 20px;font-weight: bolder">整体经营健康度</div>
							<div>本月数据</div>
						</div>
						<div class="flex flex-auto" style="gap: 10px;margin-top: 10px">
							<div class=" flex-auto flex flex-column">
								<ECharts :options="businessList.leftTop.options" class="flex-auto"></ECharts>
								<div style="text-align: center;">
									<div style="font-size: 14px">业务收支盈余率</div>
								</div>
							</div>
							<div class=" flex-auto flex flex-column">
								<ECharts :options="businessList.rightTop.options" class="flex-auto"></ECharts>
								<div style="text-align: center;">
									<div style="font-size: 14px">医疗收入成本率</div>
								</div>
							</div>
						</div>
						<div class="flex flex-auto" style="gap: 10px;margin-top: 10px">
							<div class=" flex-auto flex flex-column">
								<ECharts :options="businessList.leftBottom.options" class="flex-auto"></ECharts>
								<div style="text-align: center;">
									<div style="font-size: 14px">百元人员费用</div>
								</div>
							</div>
							<div class=" flex-auto flex flex-column">
								<ECharts :options="businessList.rightBottom.options" class="flex-auto"></ECharts>
								<div style="text-align: center;">
									<div style="font-size: 14px">百元能耗支出</div>
								</div>
							</div>
						</div>
					</div>
					<div class="flex-auto flex flex-column"
						style="padding: 20px;border: 2px solid #0F3338;border-radius: 15px;background-color: #171B39;">
						<ECharts :options="healthDegreeChartOptions" class="flex-auto"></ECharts>
						<div class="flex justify-content-space-between align-center" style="color: #fff;font-size: 14px">
							<div>X轴：时间消耗指数</div>
							<div>Y轴：费用消耗指数</div>
							<div>气泡大小：病例数</div>
						</div>
					</div>
				</div>
				<div class="flex flex-auto" style="gap: 20px;margin-top: 10px">
					<div class="flex-auto border flex flex-column"
						style="padding: 20px;border: 2px solid #0F3338;border-radius: 15px;background-color: #171B39;">
						<div class="flex justify-content-space-between align-center">
							<div style="font-size: 20px;font-weight: bolder">DRG核心指标</div>
							<div style="color: #ffffff">本月数据</div>
						</div>
						<div class="flex flex-auto" style="gap: 20px;margin-top: 20px">
							<div class=" flex-auto flex flex-column border"
								style="padding: 20px;border-radius: 10px;border: 2px solid #0F3338;box-sizing: border-box">
								<div class="flex align-center">
									<img src="@/static/2DRG入组率.png" style="width: 45px;height: 45px;border-radius: 50%" alt="">
									<div style="margin-left: 10px;font-size: 16px;color: #ffffff">DRG入组率</div>
								</div>
								<div style="color: #00968F;font-size: 24px;padding: 10px 0;font-weight: bolder">
									{{CoreIndicator.joinGroup.today_DRGGroupRatio}}%
								</div>
								<el-progress :percentage="Number(CoreIndicator.joinGroup.today_DRGGroupRatio)" :stroke-width="10"
									:show-text="false" :color="CoreIndicator.joinGroup.customColor" />
								<div class="flex justify-content-space-between" style="margin-top: 20px;color:#525363 ">
									<div>上月:{{CoreIndicator.joinGroup.terday_DRGGroupRatio}}%</div>
									<div>环比：{{CoreIndicator.joinGroup.drgGroupYearRatio>0?'+':'-'}}
										{{CoreIndicator.joinGroup.drgGroupYearRatio}}%
									</div>
								</div>
							</div>

							<div class=" flex-auto flex flex-column border"
								style="padding: 20px;border-radius: 10px;border: 2px solid #0F3338;box-sizing: border-box">
								<div class="flex align-center">
									<img src="@/static/2DRG费用.png" style="width: 45px;height: 45px;border-radius: 50%" alt="">
									<div style="margin-left: 10px;font-size: 16px;color: #ffffff">DRG费用超支率</div>
								</div>
								<div style="color: #FF4444;font-size: 24px;padding: 10px 0;font-weight: bolder">
									{{CoreIndicator.overspending.today_DRGFeeRatio}}%
								</div>
								<el-progress :percentage="Number(CoreIndicator.overspending.today_DRGFeeRatio)" :stroke-width="10"
									:show-text="false" :color="CoreIndicator.overspending.customColor" />
								<div class="flex justify-content-space-between" style="margin-top: 20px;color:#525363 ">
									<div>上月:{{CoreIndicator.overspending.terday_DRGFeeRatio}}%</div>
									<div>环比：{{CoreIndicator.overspending.drgFeeYearRatio>0?'+':'-'}}
										{{CoreIndicator.overspending.drgFeeYearRatio}}%
									</div>
								</div>
							</div>
						</div>
						<div class="flex flex-auto" style="gap: 20px;margin-top: 20px">
							<div class=" flex-auto flex flex-column border"
								style="padding: 20px;border-radius: 10px;border: 2px solid #0F3338;box-sizing: border-box">
								<div class="flex align-center">
									<img src="@/static/2DRG住院日.png" style="width: 45px;height: 45px;border-radius: 50%" alt="">
									<div style="margin-left: 10px;font-size: 16px;color: #ffffff">DRG平均住院日</div>
								</div>
								<div style="color: #00968F;font-size: 24px;padding: 10px 0;font-weight: bolder">
									{{CoreIndicator.hospitalization.today_DRGHospDayRatio}}%
								</div>
								<el-progress :percentage="Number(CoreIndicator.hospitalization.today_DRGHospDayRatio)"
									:stroke-width="10" :show-text="false" :color="CoreIndicator.hospitalization.customColor" />
								<div class="flex justify-content-space-between" style="margin-top: 20px;color:#525363 ">
									<div>上月：{{CoreIndicator.hospitalization.terday_DRGHospDayRatio}}%</div>
									<div>环比：{{CoreIndicator.hospitalization.drgHospDayYearRatio>0?'+':'-'}}
										{{CoreIndicator.hospitalization.drgHospDayYearRatio}}%
									</div>
								</div>
							</div>
							<div class=" flex-auto flex flex-column border"
								style="padding: 20px;border-radius: 10px;border: 2px solid #0F3338;box-sizing: border-box">
								<div class="flex align-center">
									<img src="@/static/2DRG医保回款.png" style="width: 45px;height: 45px;border-radius: 50%" alt="">
									<div style="margin-left: 10px;font-size: 16px;color: #ffffff">DRG医保回款率</div>
								</div>
								<div style="color: #FFB800;font-size: 24px;padding: 10px 0;font-weight: bolder">
									{{CoreIndicator.payment.today_DRGMIRatio}}%
								</div>
								<el-progress :percentage="Number(CoreIndicator.payment.today_DRGMIRatio)" :stroke-width="10"
									:show-text="false" :color="CoreIndicator.payment.customColor" />
								<div class="flex justify-content-space-between" style="margin-top: 20px;color:#525363 ">
									<div>上月：{{CoreIndicator.payment.terday_DRGMIRatio}}%</div>
									<div>环比：{{CoreIndicator.payment.drgmiYearRatio>0?'+':'-'}} {{CoreIndicator.payment.drgmiYearRatio}}%
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="flex-auto flex flex-column"
						style="padding: 20px;border: 2px solid #0F3338;border-radius: 15px;background-color: #171B39;">
						<div style="font-size: 20px;font-weight: bolder">病种盈亏TOP10</div>
						<div class="flex-auto" style="margin-top: 20px">
							<ECharts :options="drgProfitLossChartOptions" class="flex-auto"></ECharts>
						</div>
						<div class="flex justify-content-space-between" style="margin-top: 20px;height: 30px;color: #6E6F75">
							<div>盈利金额(万元)</div>
							<div>亏损金额(万元)</div>
						</div>
					</div>
				</div>
			</div>
			<!--中间列 -->
			<div class="center-wrapper flex flex-column" style="width: 390px;gap: 20px;">
				<div class="box"
					style="height: 220px;width: 100%;border: 2px solid #0F3338;border-radius: 15px;padding: 15px;background-color:#1A1C3F">
					<div class="flex justify-content-space-between align-center">
						<div style="font-size: 20px;font-weight: bolder">医保预警</div>
						<div style="color: #ffffff">实时预警</div>
					</div>
					<div style="color:#c2c3c7; font-size: 16px;padding: 0 0 10px 0;margin-top: 10px"
						class="flex justify-content-space-between align-center">
						<div>医保预算使用</div>
						<div>{{displayBMIBudgetAsyncInfo.bmiBudgetRatio}}%</div>
					</div>
					<el-progress :percentage="Number(displayBMIBudgetAsyncInfo.bmiBudgetRatio)" :stroke-width="10"
						:show-text="false" color="#F4B80E" />
					<div class="flex justify-content-space-between" style="gap: 20px;margin-top: 10px">
						<div class="flex-auto" style="padding:10px 15px;border: 2px solid #0F3338;border-radius: 15px;">
							<div class="flex align-center">
								<img src="@/static/2高倍率.png" class="border" style="width: 35px;height: 35px; border-radius: 50%" alt="">
								<div style="margin-left: 10px">高倍率病例</div>
							</div>
							<div style="font-size: 24px;margin-top: 10px">{{displayBMIBudgetAsyncInfo.maxInfoCount}}</div>
						</div>
						<div class="flex-auto" style="padding:10px 15px;border: 2px solid #0F3338;border-radius: 15px;">
							<div class="flex align-center">
								<img src="@/static/2低倍率.png" class="border" style="width: 35px;height: 35px; border-radius: 50%" alt="">
								<div style="margin-left: 10px">低倍率病例</div>
							</div>
							<div style="font-size: 24px;margin-top: 10px">{{displayBMIBudgetAsyncInfo.minInfoCount}}</div>
						</div>
					</div>
				</div>
				<div class="box flex flex-column"
					style="height: 320px;width: 100%;border: 2px solid #0F3338;border-radius: 15px;padding: 15px;background-color:#1A1C3F">
					<div class="flex justify-content-space-between align-center">
						<div style="font-size: 20px;font-weight: bolder;margin-bottom: 5px">药物耗材占比</div>
						<div style="color: #ffffff">本月数据</div>
					</div>
					<div style="overflow-y: scroll" class="flex-auto">
						<div v-for="(item, index) in coreIndicators" :key="index"
							style="margin-top: 10px;padding: 10px;border-radius: 15px;border: 1px solid #1a4a50;">
							<div class="flex justify-content-space-between" style="margin-bottom: 10px;">
								<div class="flex align-center">
									<img :src="item.icon" style="width: 45px;height: 45px;border-radius: 50%">
									<div style="margin-left: 10px;font-size: 16px;color: #ffffff">{{ item.name }}</div>
								</div>
								<div style="color: #00968F;font-weight: bolder">{{ item.value }}</div>
							</div>
							<el-progress :percentage="Number(item.percentage)" :stroke-width="10" :show-text="false"
								color="#3D968F" />
							<div class="flex justify-content-space-between" style="margin-top: 10px;color:#525363 ">
								<div>上月：{{ item.lastMonth }}</div>
								<div>环比：{{ item.yoy }}</div>
							</div>
						</div>
					</div>
				</div>
				<div class="box flex-auto"
					style="width: 100%;border: 2px solid #0F3338;border-radius: 15px;padding: 15px;background-color:#1A1C3F">
					<div class="flex align-center justify-content-space-between">
						<div style="font-size: 20px;font-weight: bolder;margin-bottom: 5px">成本异常波动</div>
						<div style="color: #ffffff">本月数据</div>
					</div>
					<div style="height: 300px;overflow-y: auto">
						<div v-for="(item, index) in costVariationItems" :key="index"
							style="margin-top: 10px;padding:10px 15px;border-radius: 15px;border: 1px solid #1a4a50;background-color: #171B39;">
							<div class="flex justify-content-space-between align-center" style="margin-bottom: 10px;">
								<div class="flex align-center">
									<div class="icon-wrapper" :style="{ backgroundColor: item.iconColor }"
										style="width: 35px;height: 35px;border-radius: 50%;display: flex;align-items: center;justify-content: center;">
										<div class="icon-arrow" :style="{ color: '#fff', fontSize: '20px' }">{{ item.arrow }}</div>
									</div>
									<div style="margin-left: 10px;font-size: 18px;color: #ccc">{{ item.department }}</div>
								</div>
								<div :style="{ color: item.percentColor, fontSize: '16px', fontWeight: 'bold' }">
									{{ item.percentChange }}
								</div>
							</div>
							<div style="color: #ccc;font-size: 14px;line-height: 1.5;">{{ item.description }}</div>
						</div>
					</div>

				</div>
			</div>
			<!-- 右边列 -->
			<div class="right-wrapper flex flex-column" style="width: 370px;gap: 20px;">
				<div class="flex-auto flex flex-column" style="height: 100%; overflow: hidden;">
					<div class="flex justify-content-space-between align-center" >
						<div style="font-size: 20px;font-weight: bolder">AI可行性建议</div>
						<div style="color: #6E6F75">智能分析</div>
					</div>
					<div class="flex flex-column" style="margin-top: 20px; flex: 1; min-height: 0;">
						<div style="overflow-y: auto; flex: 1; min-height: 0;">
							<div class="flex" v-for="(item, index) in suggestions" :key="index"
								style="padding: 15px;border-radius: 15px;background-color: #171B39;border: 1px solid #1a4a50;margin-bottom: 20px;">
								<img :src="item.icon" style="width: 40px;height: 40px;border-radius: 50%;" class="" alt="">
								<div style="margin-left: 10px">
									<div style="font-size: 18px;font-weight: bold;color: #ffffff;letter-spacing: 1px;">{{ item.title }}
									</div>
									<div
										style="color: #ccc;font-size: 14px;line-height: 1.5;margin-bottom: 15px;margin-top: 10px;letter-spacing: 1px;color: #fff">
										{{ item.description }}
									</div>
									<div class=" flex justify-content-end">
										<div
											style="color: #00928C;background-color: #15344F;width: fit-content;padding: 4px 10px;font-size: 14px">
											{{ item.priority }}
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 抽屉效果 -->
		<el-drawer v-model="drawer" :modal="true" size="800px" height="100vh" title="I am the title" class="custom-drawer"
			:with-header="false" @opened="opened">
			<div class="flex flex-column" style="height: 100%;padding: 20px;background-color: #ffffff">
				<div class="flex flex-column"
					style="background-color: #ffffff;color: #333333;font-size: 22px;font-weight: bolder">人云联拓·医疗智能体解决方案</div>
				<div v-if="isAiLoading" ref="outputRef" class="response-box flex-auto">
					<div class="ai-response-content" v-html="renderedHTML"></div>
					<span v-if="isStreaming" class="cursor">|</span>
				</div>
				<div v-else class="flex-auto flex flex-column align-center justify-content-center">
					<aiLoading></aiLoading>
				</div>
			</div>
		</el-drawer>
		<!---->
	</div>
</template>
<script setup>
	import {
		computed,
		nextTick,
		onMounted,
		ref
	} from 'vue'
	import {
		ElProgress
	} from 'element-plus'
	import ECharts from '@/components/ECharts.vue'
	import aiLoading from '@/components/aiLoading/index.vue';
	import {
		useRouter
	} from 'vue-router'
	import {
		getDisplayBMIBudgetAsyncFun,
		getDisplayDGRInfoAsyncFun,
		getDisplayDRGDiseaseInfoFun,
		getDisplayDRGIndicatorFun,
		getDisplayOBHInspectionFun,
		getDisplayRevenueInfoRatioFun,
		getDisplayDRGErrorInfoFun
	} from "@/api/finance/analysis.js";

	import {
		useCurrentTime
	} from '@/hooks/useCurrentTime'
	import MarkdownIt from "markdown-it/index.mjs";
	import DOMPurify from "dompurify";
	const {
		currentTime
	} = useCurrentTime()
	const router = useRouter()
	const jump = () => {
    router.push({path:"/NavPage"})
	}
	const isAiLoading = ref(false);
	const drawer = ref(false)
	const displayBMIBudgetAsyncInfo = ref({
		bmiBudgetRatio: null,
		maxInfoCount: null,
		minInfoCount: null
	});
	const businessList = ref({
		leftTop: {
			data: '18.5',
			options: {
				series: [{
					name: '业务收支盈余率',
					type: 'gauge',
					radius: '90%',
					center: ['50%', '50%'],
					min: 0,
					splitNumber: 4,
					axisLine: {
						lineStyle: {
							width: 10,
							color: [
								[0.2, '#EF4545'], // 5~6 红色
								[0.4, '#F59E0B'], // 6~7 橙色
								[0.6, '#FBBF24'], // 7~8 黄色
								[0.8, '#10B981'], // 8~9 绿色
								[1.0, '#059669'] // 9~10 深绿
							]
						}
					},
					axisTick: {
						splitNumber: 10,
						length: 8,
						lineStyle: {
							color: '#818999'
						}
					},
					axisLabel: {
						color: '#fff',
						fontSize: 12,
						formatter: '{value}'
					},
					detail: {
						valueAnimation: true,
						formatter: '￥{value}',
						textStyle: {
							color: '#00968F',
							fontSize: 16,
							fontWeight: 'bold'
						},
						offsetCenter: [0, '80%'] // 调整数值位置，让6.8靠下显示
					},
					data: [{
						value: 100
					}]
				}],
				grid: {
					left: '10%',
					top: '25%',
					bottom: '15%'
				},
				backgroundColor: "#1A1C3F"
			}
		},
		rightTop: {
			data: '16.5%',
			options: {
				series: [{
					name: '平均住院日',
					type: 'gauge',
					radius: '90%',
					center: ['50%', '50%'],
					min: 0,
					splitNumber: 4,
					axisLine: {
						lineStyle: {
							width: 15,
							color: [
								[0.2, '#EF4545'], // 5~6 红色
								[0.4, '#F59E0B'], // 6~7 橙色
								[0.6, '#FBBF24'], // 7~8 黄色
								[0.8, '#10B981'], // 8~9 绿色
								[1.0, '#059669'] // 9~10 深绿
							]
						}
					},
					axisTick: {
						splitNumber: 10,
						length: 8,
						lineStyle: {
							color: '#818999'
						}
					},
					axisLabel: {
						color: '#fff',
						fontSize: 12,
						formatter: '{value}'
					},
					detail: {
						valueAnimation: true,
						formatter: '{value}%',
						textStyle: {
							color: '#FF4444',
							fontSize: 16,
							fontWeight: 'bold'
						},
						offsetCenter: [0, '80%'] // 调整数值位置，让6.8靠下显示
					},
					data: [{
						value: 45.8
					}]
				}],
				grid: {
					left: '10%',
					top: '25%',
					bottom: '15%'
				},
				backgroundColor: "#1A1C3F"
			}
		},
		leftBottom: {
			data: '3.245',
			options: {
				series: [{
					name: '平均住院日',
					type: 'gauge',
					radius: '90%',
					center: ['50%', '50%'],
					min: 0,
					splitNumber: 4,
					axisLine: {
						lineStyle: {
							width: 15,
							color: [
								[0.2, '#EF4545'], // 5~6 红色
								[0.4, '#F59E0B'], // 6~7 橙色
								[0.6, '#FBBF24'], // 7~8 黄色
								[0.8, '#10B981'], // 8~9 绿色
								[1.0, '#059669'] // 9~10 深绿
							]
						}
					},
					axisTick: {
						splitNumber: 10,
						length: 8,
						lineStyle: {
							color: '#818999'
						}
					},
					axisLabel: {
						color: '#fff',
						fontSize: 12,
						formatter: '{value}'
					},
					detail: {
						valueAnimation: true,
						formatter: '{value}%',
						textStyle: {
							color: '#FF4444',
							fontSize: 14,
							fontWeight: 'bold'
						},
						offsetCenter: [0, '80%'] // 调整数值位置，让6.8靠下显示
					},
					data: [{
						value: 16.8
					}]
				}],
				grid: {
					left: '10%',
					top: '25%',
					bottom: '15%'
				},
				backgroundColor: "#1A1C3F"
			}
		},
		rightBottom: {
			data: '￥3.8',
			options: {
				series: [{
					name: '平均住院日',
					type: 'gauge',
					radius: '90%',
					center: ['50%', '50%'],
					min: 0,
					splitNumber: 4,
					axisLine: {
						lineStyle: {
							width: 15,
							color: [
								[0.2, '#EF4545'], // 5~6 红色
								[0.4, '#F59E0B'], // 6~7 橙色
								[0.6, '#FBBF24'], // 7~8 黄色
								[0.8, '#10B981'], // 8~9 绿色
								[1.0, '#059669'] // 9~10 深绿
							]
						}
					},
					axisTick: {
						splitNumber: 10,
						length: 8,
						lineStyle: {
							color: '#818999'
						}
					},
					axisLabel: {
						color: '#fff',
						fontSize: 12,
						formatter: '{value}'
					},
					detail: {
						valueAnimation: true,
						formatter: '￥{value}',
						textStyle: {
							color: '#00968F',
							fontSize: 16,
							fontWeight: 'bold'
						},
						offsetCenter: [0, '80%'] // 调整数值位置，让6.8靠下显示
					},
					data: [{
						value: 16.8
					}]
				}],
				grid: {
					left: '10%',
					top: '25%',
					bottom: '15%'
				},
				backgroundColor: "#1A1C3F"
			}
		}
	});
	const healthDegreeChartOptions = ref({
		title: {
			text: 'DRG全局绩效分析',
			textStyle: {
				fontSize: 20,
				fontWeight: 'bolder',
				color: '#ffffff',

			},
			left: 'left',
			top: '0px'
		},
		legend: {
			show: true,
			right: 'right',
			top: 'top',
			data: [{
					name: '盈利',
					icon: 'circle',
					itemStyle: {
						color: '#00BFA5'
					}
				},
				{
					name: '亏损',
					icon: 'circle',
					itemStyle: {
						color: '#f85757'
					}
				}
			],
			textStyle: {
				color: '#ffffff'
			}
		},
		tooltip: {
			trigger: 'item',
			formatter: function(params) {
				const value = params.value;
				const name = params.name;
				const status = params.seriesName === '盈利' ? '盈利' : '亏损';
				return `<div style="padding: 10px;  border-radius: 8px; color: #000000;">
          <div><strong>DRG分组：</strong>${name}</div>
          <div><strong>状态：</strong><span style="color: ${params.color}">${status}</span></div>
          <div><strong>时间消耗指数：</strong>${value[0]}</div>
          <div><strong>费用消耗指数：</strong>${value[1]}</div>
          <div><strong>病例数：</strong>${value[2]}</div>
        </div>
      `;
			}
		},
		xAxis: {
			type: 'value',
			name: '时间消耗指数',
			nameLocation: 'middle',
			nameGap: 30,
			nameTextStyle: {
				fontSize: 16,
			},
			axisLabel: {
				color: '#fff',
				formatter: '{value}',
				fontSize: 14,
			},
			axisLine: {
				lineStyle: {
					color: '#fff',
					fontSize: 14,
				}
			},
			splitLine: {
				lineStyle: {
					color: '#fff',
					fontSize: 14,

				}
			},
			min: 0,
			interval: 0.3
		},
		yAxis: {
			type: 'value',
			name: '费用消耗指数',
			nameLocation: 'middle',
			nameTextStyle: {
				fontSize: 16,
			},
			nameGap: 30,
			fontSize: 18,
			axisLabel: {
				color: '#fff',
				formatter: '{value}'
			},
			axisLine: {
				lineStyle: {
					color: '#fff',
					fontSize: 14,
				}
			},
			splitLine: {
				lineStyle: {
					color: '#fff',
					fontSize: 14,
				}
			},
			min: 0,
			interval: 0.3
		},
		series: [{
				name: '盈利',
				type: 'scatter',
				symbol: 'circle',
				symbolSize: function(val) {
					return Math.sqrt(val[2]) * 10;
				},
				label: {
					show: false
				},
				itemStyle: {
					color: '#D1751F'
				},
				data: [
					[0.7, 0.8, 15],
					[0.8, 1.0, 20],
					[0.9, 1.2, 25],
					[1.0, 1.1, 30]
				]
			},
			{
				name: '亏损',
				type: 'scatter',
				symbol: 'circle',
				symbolSize: function(val) {
					return Math.sqrt(val[2]) * 10;
				},
				label: {
					show: false
				},
				itemStyle: {
					color: '#67ad2f'
				},
				data: [
					[1.2, 1.4, 10],
					[1.3, 1.1, 12],
					[1.4, 0.9, 8]
				]
			}
		],
		grid: {
			left: '10%',
			right: '15%',
			bottom: '10%',
			containLabel: true
		},
		backgroundColor: "#171B39"
	});
	const drgProfitLossChartOptions = ref({
		tooltip: {
			trigger: 'item',
			formatter: function(params) {
				const value = params.value;
				const sign = value >= 0 ? '+' : '';
				return `        <div style="padding: 5px;">
          <div><strong>${params.name}</strong></div>
          <div>金额: ${sign}${value}万元</div>
        </div>
      `;
			}
		},
		xAxis: {
			type: 'value',
			nameLocation: 'middle',
			nameGap: 30,
			axisLabel: {
				color: '#6E6F75',
				fontSize: 12,
				formatter: '{value}'
			},
			axisLine: {
				lineStyle: {
					color: '#6E6F75'
				}
			},
			splitLine: {
				lineStyle: {
					color: '#303030'
				}
			},
			interval: 50
		},
		yAxis: {
			type: 'category',
			data: [
				'GU17 肾衰竭',
				'NS23 脑肿瘤',
				'ON21 肺癌切除',
				'RE13 肺炎',
				'GL15 糖尿病',
				'GE19 消化道出血',
				'MD11 脑梗死',
				'FB23 心脏瓣膜',
				'HC25 髋关节置换',
				'FB25 冠脉搭桥'
			],
			axisLabel: {
				color: '#9c9292',
				fontSize: 14,
				formatter: '{value}'
			},
			axisLine: {
				lineStyle: {
					color: '#6E6F75'
				}
			}
		},
		series: [{
			name: '盈亏金额',
			type: 'bar',
			barWidth: '60%',
			label: {
				show: true,
				position: 'insideEnd',
				formatter: function(params) {
					const value = params.value;
					const sign = value >= 0 ? '+' : '';
					return `${sign}${Math.abs(value)}万`;
				},
				textStyle: {
					color: '#fff',
					fontSize: 12
				}
			},
			itemStyle: {
				color: function(params) {
					// 根据值的正负设置颜色
					return params.value >= 0 ? '#10B981' : '#EF4545';
				}
			},
			data: [{
					value: 28,
					name: 'GU17 肾衰竭'
				},
				{
					value: -95,
					name: 'NS23 脑肿瘤'
				},
				{
					value: -120,
					name: 'ON21 肺癌切除'
				},
				{
					value: -42,
					name: 'RE13 肺炎'
				},
				{
					value: -85,
					name: 'GL15 糖尿病'
				},
				{
					value: 45,
					name: 'GE19 消化道出血'
				},
				{
					value: 98,
					name: 'MD11 脑梗死'
				},
				{
					value: 95,
					name: 'FB23 心脏瓣膜'
				},
				{
					value: 65,
					name: 'HC25 髋关节置换'
				},
				{
					value: 120,
					name: 'FB25 冠脉搭桥'
				}
			]
		}],
		grid: {
			left: '20%',
			right: '15%',
			bottom: '15%',
			top: '15%'
		},
		backgroundColor: '#171B39'
	});
	const CoreIndicator = ref({
		joinGroup: {
			customColor: '#00B5AC',
			today_DRGGroupRatio: null,
			terday_DRGGroupRatio: null,
			drgGroupYearRatio: null,
		},
		overspending: {
			customColor: '#FF4444',
			today_DRGFeeRatio: null,
			terday_DRGFeeRatio: null,
			drgFeeYearRatio: null,
		},
		hospitalization: {
			customColor: '#00B5AC',
			today_DRGHospDayRatio: null,
			terday_DRGHospDayRatio: null,
			drgHospDayYearRatio: null,
		},
		payment: {
			customColor: '#FFB800',
			today_DRGMIRatio: null,
			terday_DRGMIRatio: null,
			drgmiYearRatio: null,
		},
	});
	const coreIndicators = ref([{
			name: '药物占比',
			value: '32.5%',
			percentage: 32.5,
			lastMonth: '95.2%',
			yoy: '+1.6%',
			icon: new URL('@/static/2药物占比.png', import.meta.url).href,
		},
		{
			name: '耗材占比',
			value: '28.3%',
			percentage: 28.3,
			lastMonth: '25.1%',
			yoy: '-2.4%',
			icon: new URL('@/static/2耗材占比.png', import.meta.url).href,
		}
	]);
	const costVariationItems = ref([{
			department: '心脏外科',
			percentChange: '+28.7%',
			percentColor: '#EF4545',
			arrow: '↑',
			iconColor: '#EF4545',
			description: '人工瓣膜使用量异常'
		},
		{
			department: '检验科',
			percentChange: '+15.2%',
			percentColor: '#F59E0B',
			arrow: '↑',
			iconColor: '#F59E0B',
			description: '基因检测项目激增'
		},
		{
			department: '骨科',
			percentChange: '-12.3%',
			percentColor: '#10B981',
			arrow: '↓',
			iconColor: '#10B981',
			description: '关节置换耗材用量下降'
		},
		{
			department: '心脏外科',
			percentChange: '+28.7%',
			percentColor: '#EF4545',
			arrow: '↑',
			iconColor: '#EF4545',
			description: '人工瓣膜使用量异常'
		},
		{
			department: '检验科',
			percentChange: '+15.2%',
			percentColor: '#F59E0B',
			arrow: '↑',
			iconColor: '#F59E0B',
			description: '基因检测项目激增'
		},
		{
			department: '心脏外科',
			percentChange: '+28.7%',
			percentColor: '#EF4545',
			arrow: '↑',
			iconColor: '#EF4545',
			description: '人工瓣膜使用量异常'
		},
		{
			department: '检验科',
			percentChange: '+15.2%',
			percentColor: '#F59E0B',
			arrow: '↑',
			iconColor: '#F59E0B',
			description: '基因检测项目激增'
		},
	]);
	const suggestions = ref([{
			icon: new URL('@/static/2药物占比.png', import.meta.url).href,
			iconColor: '#00BFA5',
			title: '精准控费建议',
			description: '"GL15 糖尿病伴严重并发症"\nDRG组处于亏损状态，AI成本拆解发现外购品药和新型检查项目是主要超支点。建议进行药物经济学评价，在保证疗效的前提下，评估进入集采目录的替代方案，并优化检查流程。',
			priority: '执行优先级: 高',
			priorityColor: '#00BFA5',

		},
		{
			icon: new URL('@/static/2AI建议3.png', import.meta.url).href,
			iconColor: '#F59E0B',
			title: '结构调整建议',
			description: '胸外科CMI值高但收益率低。建议优先分析该科室高权重病种的临床路径，通过降低成本和提高效率将其转化为盈利科室。可考虑优化手术室排班和耗材管理。',
			priority: '执行优先级: 中',
			priorityColor: '#F59E0B'
		},
		{
			icon: new URL('@/static/2AI建议2.png', import.meta.url).href,
			iconColor: '#EF4545',
			title: '预测与模拟',
			description: '根据当前DRG分组和费用趋势，预测本季度医保结算将出现500万缺口。建议立即启动成本控制专项行动，重点监控高值耗材和可控运营成本(如能耗、物流)。AI可模拟不同控费策略的效果。',
			priority: '执行优先级: 紧急',
			priorityColor: '#EF4545'
		},
		{
			icon: new URL('@/static/2药物占比.png', import.meta.url).href,
			iconColor: '#00BFA5',
			title: '精准控费建议',
			description: '"GL15 糖尿病伴严重并发症"\nDRG组处于亏损状态，AI成本拆解发现外购品药和新型检查项目是主要超支点。建议进行药物经济学评价，在保证疗效的前提下，评估进入集采目录的替代方案，并优化检查流程。',
			priority: '执行优先级: 高',
			priorityColor: '#00BFA5'
		},
		{
			icon: new URL('@/static/2AI建议2.png', import.meta.url).href,
			iconColor: '#F59E0B',
			title: '结构调整建议',
			description: '胸外科CMI值高但收益率低。建议优先分析该科室高权重病种的临床路径，通过降低成本和提高效率将其转化为盈利科室。可考虑优化手术室排班和耗材管理。',
			priority: '执行优先级: 中',
			priorityColor: '#F59E0B'
		},
		{
			icon: new URL('@/static/2药物占比.png', import.meta.url).href,
			iconColor: '#EF4545',
			title: '预测与模拟',
			description: '根据当前DRG分组和费用趋势，预测本季度医保结算将出现500万缺口。建议立即启动成本控制专项行动，重点监控高值耗材和可控运营成本(如能耗、物流)。AI可模拟不同控费策略的效果。',
			priority: '执行优先级: 紧急',
			priorityColor: '#EF4545'
		}
	]);
	// 图表信息 =========================
	const displayOBHInspection = (data) => {
		businessList.value.leftTop.data = data.medIncomeRatio;
		businessList.value.leftTop.options.series[0].data[0].value = data.medIncomeRatio
		businessList.value.rightTop.data = data.busIncomeRatio;
		businessList.value.rightTop.options.series[0].data[0].value = data.busIncomeRatio
		businessList.value.leftBottom.data = data.infoFeeRatio;
		businessList.value.leftBottom.options.series[0].data[0].value = data.infoFeeRatio
		businessList.value.rightBottom.data = data.energyRatio;
		businessList.value.rightBottom.options.series[0].data[0].value = data.energyRatio
	};
	const displayDGRInfoAsync = (data) => {
		const colorMap = {
			'盈利': '#00BFA5',
			'亏损': '#f85757'
		};
		const processedData = data.map(item => ({
			name: item.drgName,
			value: [
				parseFloat(item.drgTimeRatio),
				parseFloat(item.drgFeeRatio),
				parseInt(item.drgCaseCount)
			],
			itemStyle: {
				color: colorMap[item.drgStatus]
			}
		}));
		const profitData = processedData.filter(d => d.itemStyle.color === '#00BFA5');
		const lossData = processedData.filter(d => d.itemStyle.color === '#f85757');
		nextTick(() => {
			healthDegreeChartOptions.value.series[0].data = profitData;
			healthDegreeChartOptions.value.series[1].data = lossData;
		});
	};
	// 数据更新-----------------------------------------------------
	// 病种盈亏TOP10数组
	const diseaseTopArr = ref([])
	// 成本异常波动树数组
	const costArr = ref([])
	const updateDashboardCharts = async () => {
		const results = await Promise.allSettled([
			getDisplayOBHInspectionFun(),
			getDisplayDGRInfoAsyncFun(),
			getDisplayBMIBudgetAsyncFun(),
			getDisplayRevenueInfoRatioFun(),
			getDisplayDRGIndicatorFun(),
			getDisplayDRGDiseaseInfoFun(),
			getDisplayDRGErrorInfoFun()
		]);
		if (results[0].status == 'fulfilled' && results[0].value.data.code == 200) {
			displayOBHInspection(results[0].value.data.data);
		}
		if (results[1].status == 'fulfilled' && results[1].value.data.code == 200) {
			displayDGRInfoAsync(results[1].value.data.data);
		}
		if (results[2].status == 'fulfilled' && results[2].value.data.code == 200) {
			displayBMIBudgetAsyncInfo.value = results[2].value.data.data;
		}
		if (results[3].status == 'fulfilled' && results[3].value.data.code == 200) {
			coreIndicators.value = [{
					name: '药物占比',
					value: results[3].value.data.data.today_DrugRatio,
					percentage: results[3].value.data.data.today_DrugRatio,
					lastMonth: results[3].value.data.data.terday_DrugRatio,
					yoy: results[3].value.data.data.drugYearRatio,
					icon: new URL('@/static/2药物占比.png', import.meta.url).href,
				},
				{
					name: '耗材占比',
					value: results[3].value.data.data.today_RevenueRatio,
					percentage: results[3].value.data.data.today_RevenueRatio,
					lastMonth: results[3].value.data.data.terday_RevenueRatio,
					yoy: results[3].value.data.data.revenueYearRatio,
					icon: new URL('@/static/2耗材占比.png', import.meta.url).href,
				}
			]
		}
		if (results[4].status == 'fulfilled' && results[4].value.data.code == 200) {
			CoreIndicator.value = {
				joinGroup: {
					customColor: '#00B5AC',
					today_DRGGroupRatio: results[4].value.data.data.today_DRGGroupRatio,
					terday_DRGGroupRatio: results[4].value.data.data.terday_DRGGroupRatio,
					drgGroupYearRatio: results[4].value.data.data.drgGroupYearRatio,
				},
				overspending: {
					customColor: '#FF4444',
					today_DRGFeeRatio: results[4].value.data.data.today_DRGFeeRatio,
					terday_DRGFeeRatio: results[4].value.data.data.terday_DRGFeeRatio,
					drgFeeYearRatio: results[4].value.data.data.drgFeeYearRatio,
				},
				hospitalization: {
					customColor: '#00B5AC',
					today_DRGHospDayRatio: results[4].value.data.data.today_DRGHospDayRatio,
					terday_DRGHospDayRatio: results[4].value.data.data.terday_DRGHospDayRatio,
					drgHospDayYearRatio: results[4].value.data.data.drgHospDayYearRatio,
				},
				payment: {
					customColor: '#FFB800',
					today_DRGMIRatio: results[4].value.data.data.today_DRGMIRatio,
					terday_DRGMIRatio: results[4].value.data.data.terday_DRGMIRatio,
					drgmiYearRatio: results[4].value.data.data.drgmiYearRatio,
				},
			};
		}
		if (results[5].status == 'fulfilled' && results[5].value.data.code == 200) {
			let x_label = [];
			let y_data = [];
			diseaseTopArr.value = results[5].value.data.data
			results[5].value.data.data.forEach(item => {
				x_label.push(item.drgName);
				y_data.push({
					value: item.drgAmount,
					name: item.drgName
				});
			});
			nextTick(() => {
				drgProfitLossChartOptions.value.yAxis.data = x_label;
				drgProfitLossChartOptions.value.series[0].data = y_data;
			});
		}
		if (results[6].status == 'fulfilled' && results[6].value.data.code == 200) {
			costArr.value = results[6].value.data.data
		}

	};
	onMounted(() => {
		updateDashboardCharts();
		// const timer = setInterval(updateDashboardCharts, 5 * 60 * 1000);
		// onUnmounted(() => {
		//   clearInterval(timer);
		// });
	});
	// ===========================  AI部分
	const isStreaming = ref(false);
	const renderedHTML = ref('');
	const outputRef = ref(null);
	const API_KEY = 'sk-69a5314907eb4feea7c1a371c6778a51'
	const API_URL = ref(
		'https://dashscope.aliyuncs.com/api/v2/apps/agent/8ee6a940ac4e4ec4bf0c41554b08a62f/compatible-mode/v1/responses');
	const md = new MarkdownIt({
		html: false,
		breaks: true,
		typographer: true
	})

	function detectAndConvertTextTable(text) {
		const lines = text.trim().split('\n')
		let headers = []
		let rows = []

		for (const line of lines) {
			const trimmed = line.trim()
			if (!trimmed) continue

			// 使用多个空格或制表符分割
			const cells = trimmed.split(/\s{2,}|\t/).filter(Boolean)
			if (cells.length < 2) continue // 至少两列

			// 判断是否为表头：不含明显数字/百分比
			const hasNumbers = /[\d\.]+%?/.test(trimmed)
			if (!headers.length && !hasNumbers) {
				headers = cells
			} else if (hasNumbers && cells.length >= headers.length) {
				// 数据行：补全或截断以匹配表头长度
				const row = cells.slice(0, headers.length)
				rows.push(row)
			}
		}

		// 构造 Markdown 表格
		if (headers.length >= 2 && rows.length >= 1) {
			const headerRow = '| ' + headers.join(' | ') + ' |'
			const separatorRow = '| ' + headers.map(() => '---').join(' | ') + ' |'
			const dataRows = rows.map(row => '| ' + row.join(' | ') + ' |').join('\n')
			return [headerRow, separatorRow, dataRows].join('\n')
		}

		return null
	}
	const originalRender = md.render.bind(md)
	md.render = function(content) {
		let enhancedContent = content
		// 查找可能的表格块（连续多行，每行有多个空格）
		const potentialBlocks = enhancedContent.match(/(?:^|\n)(?:[^\n]+\s+[^\n]+\n?)+/g)
		if (potentialBlocks) {
			potentialBlocks.forEach(block => {
				const cleanedBlock = block.trim()
				if (!cleanedBlock || cleanedBlock.startsWith('|') || cleanedBlock.includes('---')) return

				const tableMarkdown = detectAndConvertTextTable(cleanedBlock)
				if (tableMarkdown) {
					enhancedContent = enhancedContent.replace(cleanedBlock, tableMarkdown)
				}
			})
		}
		try {
			return originalRender(enhancedContent)
		} catch (e) {
			console.error('[Markdown] 渲染失败:', e)
			return `<p style="color:red">❌ 内容渲染错误</p>`
		}
	}

	// 内网访问
	const startStreamIntranet = async (requestData) => {
		if (isStreaming.value) return
		renderedHTML.value = ''
		isStreaming.value = true
		let accumulatedText = ''
		try {
			let payload = {
				question: requestData,
				type: 3
			};
			const response = await fetch('http://192.168.0.103:9907/api/Bailian/stream', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json',
				},
				body: JSON.stringify(payload)
			})
			if (!response.ok) throw new Error(`HTTP ${response.status}: ${await response.text()}`)
			const reader = response.body.getReader()
			const decoder = new TextDecoder('utf-8')
			let buffer = ''
			isAiLoading.value = true
			while (true) {
				const {
					done,
					value
				} = await reader.read()
				if (done) break
				buffer += decoder.decode(value, {
					stream: true
				})
				const lines = buffer.split('\n')
				buffer = lines.pop()
				for (const line of lines) {
					const trimmed = line.trim()
					if (!trimmed.startsWith('data:')) continue

					const dataStr = trimmed.slice(5).trim()
					if (!dataStr || dataStr === '[DONE]') continue

					try {
						if (dataStr.includes('data:')) {
							const data = JSON.parse(dataStr.replace('data:', '').trim())
							if (data.type === 'response.output_text.delta' && typeof data.delta === 'string') {
								const deltaText = data.delta
								accumulatedText += deltaText
								console.log(data.delta)
								// 使用增强版 markdown-it 渲染（含表格修复）
								const unsafeHtml = md.render(accumulatedText)
								renderedHTML.value = DOMPurify.sanitize(unsafeHtml)
								// 自动滚动到底部
								await nextTick()
								outputRef.value?.scrollTo?.(0, outputRef.value.scrollHeight)
							}
						}
					} catch (err) {
						console.warn('[解析失败]', err, dataStr)
					}
				}
			}
			const finalText = accumulatedText + '\n\n✅ 报告生成完成。'
			const unsafeHtml = md.render(finalText)
			renderedHTML.value = DOMPurify.sanitize(unsafeHtml)
		} catch (error) {
			console.error('[请求失败]', error)
			renderedHTML.value = `<span style="color:red">❌ 请求失败：${error.message}</span>`
		} finally {
			isStreaming.value = false
		}
	}

	const startStream = async (requestData) => {
		if (isStreaming.value) return
		renderedHTML.value = ''
		isStreaming.value = true
		let accumulatedText = ''
		try {
			const payload = {
				input: [{
					type: 'message',
					role: 'user',
					content: [{
						type: 'input_text',
						text: requestData
					}]
				}],
				stream: true
			}
			console.log('API_URL :' + API_URL.value)
			console.log('API_KEY :' + API_KEY)
			const response = await fetch(API_URL.value, {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json',
					'Authorization': `Bearer ${API_KEY}`
				},
				body: JSON.stringify(payload)
			})
			if (!response.ok) throw new Error(`HTTP ${response.status}: ${await response.text()}`)
			const reader = response.body.getReader()
			const decoder = new TextDecoder('utf-8')
			let buffer = ''
			isAiLoading.value = true
			while (true) {
				const {
					done,
					value
				} = await reader.read()
				if (done) break
				buffer += decoder.decode(value, {
					stream: true
				})
				const lines = buffer.split('\n')
				buffer = lines.pop()
				for (const line of lines) {
					const trimmed = line.trim()
					if (!trimmed.startsWith('data:')) continue

					const dataStr = trimmed.slice(5).trim()
					if (!dataStr || dataStr === '[DONE]') continue

					try {
						const data = JSON.parse(dataStr)
						if (data.type === 'response.output_text.delta' && typeof data.delta === 'string') {
							const deltaText = data.delta
							accumulatedText += deltaText
							console.log(data.delta)
							// 使用增强版 markdown-it 渲染（含表格修复）
							const unsafeHtml = md.render(accumulatedText)
							renderedHTML.value = DOMPurify.sanitize(unsafeHtml)
							// 自动滚动到底部
							await nextTick()
							outputRef.value?.scrollTo?.(0, outputRef.value.scrollHeight)
						}
					} catch (err) {
						console.warn('[解析失败]', err, dataStr)
					}
				}
			}
			const finalText = accumulatedText + '\n\n✅ 报告生成完成。'
			const unsafeHtml = md.render(finalText)
			renderedHTML.value = DOMPurify.sanitize(unsafeHtml)
		} catch (error) {
			console.error('[请求失败]', error)
			renderedHTML.value = `<span style="color:red">❌ 请求失败：${error.message}</span>`
		} finally {
			isStreaming.value = false
		}
	}
	const opened = () => {
		isAiLoading.value = false;
		const drgInfo = diseaseTopArr.value.map(item => {
			const amount = parseFloat(item.drgAmount);
			const isProfit = amount >= 0;
			const type = isProfit ? '盈利' : '亏损';
			const absAmount = Math.abs(amount).toFixed(2);
			return `${item.drgName}：${type}约${absAmount}万元`;
		}).join('，');

		const costInfo = costArr.value.map(item => {
			const amount = parseFloat(item.departMenCost);
			const isProfit = amount >= 0;
			const type = isProfit ? '+' : '-';
			const absAmount = Math.abs(amount).toFixed(2);
			return `${item.departMenName}：${type}${absAmount}%`;
		}).join('，');

		const requestText = `
		 业务收支盈余率：${businessList.value.leftTop.data}%，
		 医疗收入成本率：${businessList.value.rightTop.data}%，
		 百元人员费用：${businessList.value.leftBottom.data}元，
		 百元能耗支出：${businessList.value.rightBottom.data}元，
		 医保预算使用：${displayBMIBudgetAsyncInfo.value.bmiBudgetRatio}%，
		 高倍率病例数：${displayBMIBudgetAsyncInfo.value.maxInfoCount}例，
		 低倍率病例数：${displayBMIBudgetAsyncInfo.value.minInfoCount}例，
		 药物占比：${coreIndicators.value[0].value}%，
		 耗材占比：${coreIndicators.value[1].value}%，
		 DRG入组率：${CoreIndicator.value.joinGroup.today_DRGGroupRatio}%，
		 DRG费用超支率：${CoreIndicator.value.overspending.today_DRGFeeRatio}%，
		 DRG平均住院日：${CoreIndicator.value.hospitalization.today_DRGHospDayRatio}}天，
		 DRG医保回款率：${CoreIndicator.value.payment.today_DRGMIRatio}%，
		 病种盈亏 TOP10（盈利/亏损金额）：${drgInfo}，
		 成本异常波动：${costInfo}`;
		// const requestText = `
		//    业务收支盈余率：${businessList.value.leftTop.data}%，
		//    医疗收入成本率：${businessList.value.rightTop.data}%，
		//    百元人员费用：${businessList.value.leftBottom.data}元，
		//    百元能耗支出：${businessList.value.rightBottom.data}元，
		//    医保预算使用：${displayBMIBudgetAsyncInfo.value.bmiBudgetRatio}%，
		//    高倍率病例数：${displayBMIBudgetAsyncInfo.value.maxInfoCount}例，
		//    低倍率病例数：${displayBMIBudgetAsyncInfo.value.minInfoCount}例，
		//    药物占比：${coreIndicators.value[0].value}%，
		//    耗材占比：${coreIndicators.value[1].value}%，
		//    DRG入组率：${CoreIndicator.value.joinGroup.today_DRGGroupRatio}%，
		//    DRG费用超支率：${CoreIndicator.value.overspending.today_DRGFeeRatio}%，
		//    DRG平均住院日：${CoreIndicator.value.hospitalization.today_DRGHospDayRatio}}天，
		//    DRG医保回款率：${CoreIndicator.value.payment.today_DRGMIRatio}%，
		//    病种盈亏 TOP10（盈利/亏损金额）：
		//  GU17肾衰竭：亏损约150万元，
		//  NS23脑肿瘤：亏损约120万元，
		//    ON21肺癌切除：亏损约100万元，
		//    RE13肺炎：亏损约80万元，
		//    GL15糖尿病：亏损约70万元，
		//    GE19消化道出血：盈利约50万元，
		//    MD11心肌梗死：盈利约80万元，
		//    FB23心脏瓣膜：盈利约100万元，
		//    HC25关节置换：盈利约120万元，
		//    FB25冠脉搭桥：盈利约150万元，
		//    成本异常波动：心脏外科成本波动：+28.7%，
		//    检验科成本波动：+15.2%，
		//    骨科成本波动：-12.3%。`;

		// 外网
		startStream(requestText)
		// 内网
		// startStreamIntranet(requestText)
	}
</script>
<style scoped lang="less">
	.dashboard-container {
		width: 100%;
		height: 100%;
		background-color: #0F172A;
		font-family: 'Microsoft YaHei', sans-serif;
		color: var(--text-color);
		padding: 10px 20px;
		box-sizing: border-box;

		.dashboard-header {
			padding: 10px 0;

			.logo {
				width: 60px;
				height: 60px;
				border-radius: 50%;

			}

			.title-box {
				margin-left: 20px;

				.title {
					font-size: 21px;
					font-weight: bolder;
				}

				.hospital-name {
					font-size: 14px;
					padding-top: 5px;
					color: #818999;
				}
			}

			.right-box {
				.time-box {
					margin-right: 20px;

					.current-time-label {
						font-size: 12px;
						color: #818999;
					}

					.current-time-value {
						font-size: 18px;
						padding-top: 5px;
						font-weight: bolder;
					}

				}

				.avatar {
					width: 50px;
					height: 50px;
					border-radius: 50%;
					margin: 0 auto;
					display: block;
				}

				.user-name {
					font-size: 12px;
					padding-top: 5px;
					color: #818999;
				}
			}
		}

		.dashboard-main {
			margin-top: 10px;

			.left-wrapper {
				border-radius: 15px;
			}

			.center-wrapper {
				//background-color: #1A1C3F;
				//border-radius: 15px;
				//border: 2px solid #0F3338;
				//padding: 20px;
			}

			.right-wrapper {
				background-color: #1A1C3F;
				border-radius: 15px;
				border: 2px solid #0F3338;
				padding: 20px;
			}

		}
	}

	// ================================
	::v-deep(.el-drawer) {
		background-color: rgba(12, 16, 19, 0.91);
	}

	::v-deep(.el-drawer__body) {
		padding: 0px
	}

	.response-box {
		width: 100%;
		padding: 16px;
		overflow-y: auto;
		line-height: 1.7;
		font-size: 15px;
		background-color: #ffffff;
		color: #333333;
	}

	/* ==================== 富文本样式 ==================== */
	.ai-response-content h1,
	.ai-response-content h2,
	.ai-response-content h3 {
		margin: 1em 0 0.5em;
		color: #07173b;
	}

	.ai-response-content h1 {
		font-size: 1.8em;
		text-align: center;
	}

	.ai-response-content h2 {
		font-size: 1.5em;
		border-left: 4px solid #007bff;
		padding-left: 12px;
	}

	.ai-response-content h3 {
		font-size: 1.3em;
		color: #34495e;
	}

	:global(.ai-response-content table) {
		width: 100%;
		border-collapse: collapse;
		margin: 1em 0;
		font-size: 0.95em;
		border: 1px solid #2c2a2a;
	}

	:global(.ai-response-content th,
		.ai-response-content td) {
		border: 1px solid #ccc;
		padding: 8px 12px;
		text-align: center;
	}

	:global(.ai-response-content th) {
		background-color: #f0f5ff;
		font-weight: 600;
		color: #1a3b6d;
	}

	:global(.ai-response-content tr:nth-child(even)) {
		background-color: #f9f9f9;
	}

	:global(.ai-response-content p) {
		margin: 0.6em 2;
	}

	:global(.ai-response-content ul) {
		margin-left: 40px;
		margin: 0.6em 1;
		padding-left: 1;
	}

	:global(.ai-response-content ol) {
		margin-left: 40px;
		margin: 0.6em 2;
		padding-left: 2;
	}

	:global(.ai-response-content li) {
		margin: 0.6em 1.2;
		padding-left: 20px;
	}

	.cursor {
		animation: blink 1.2s step-end infinite;
		color: #007bff;
		font-weight: bold;
		font-size: 1.1em;
	}

	:global(.ai-message table) {
		width: 100%;
		border-collapse: collapse;
		margin: 1em 0;
		font-size: 0.95em;
	}

	:global(.ai-message th,
		.ai-message td) {
		border: 1px solid #ccc;
		padding: 6px 10px;
		text-align: left;
	}

	:global(.ai-message th) {
		background-color: #f0f5ff;
		font-weight: 600;
	}

	:global(.ai-message tr:nth-child(even)) {
		background-color: #f9f9f9;
	}

	@keyframes blink {

		0%,
		100% {
			opacity: 1;
		}

		50% {
			opacity: 0;
		}
	}
</style>